<template>
    <el-col :span="20">
        <el-menu>
            <el-menu-item>
                <router-link :to="{name: 'Main'}" @click="refreshMainPage">
                    <el-icon><House/></el-icon>
                    <span class="menuControl">首页</span>
                </router-link>
            </el-menu-item>
            <el-menu-item> 
                <router-link :to="{name: 'Books'}">
                    <el-icon><Search/></el-icon>
                    <span class="menuControl">图书查询</span>
                </router-link>
            </el-menu-item>
            <el-menu-item>
                <router-link :to="{name: 'MyShelve'}">
                    <el-icon><Upload/></el-icon>
                    <span class="menuControl">我的上架</span>
                </router-link>
            </el-menu-item>
            <el-menu-item>
                <router-link :to="{name: 'MyBorrow'}">
                    <el-icon><Memo/></el-icon>
                    <span class="menuControl">我的借阅</span>
                </router-link>
            </el-menu-item>
            <el-menu-item>
                <router-link :to="{name: 'Message'}" @click="toMessage">
                    <el-icon><ChatDotRound/></el-icon>
                    <span class="menuControl">消息中心</span>
                </router-link>
            </el-menu-item>
            <el-menu-item>
                <router-link :to="{name: 'About'}">
                    <el-icon><InfoFilled/></el-icon>
                    <span class="menuControl">关于我们</span>
                </router-link>
            </el-menu-item>
        </el-menu>
    </el-col>
</template>

<script >
import { ChatDotRound, House, InfoFilled, Search, Upload } from '@element-plus/icons-vue';

export default {
    name:   'Home',
    data(){
        return{
            
        }
    },
    methods:{
        toMessage(){
            this.$store.commit('addState')
            console.log(this.$store.state.count)
        },
        refreshMainPage() {
            // 导航到Main页面
            this.$router.push({ name: 'Main' }).then(() => {
                // 刷新Main页面
                location.reload();
            });
        }
}
}
</script>

<style scoped>
    .menuControl{
        font-size: 18px;
    }
    a{
        text-decoration: none;
        color:#303133;
    }
    a:hover{
        color: #579cfd;
    }
    .router-link-active{
        color: #579cfd;
    }
    .el-aside{
        padding-right: 20px;
    }
    .el-col{
        height: 100%;
    }
    .el-menu{
        height: 100%;
    }
    .el-menu:first-child{
        padding-top: 20px;
    }
</style>